<template>
  <div id="Home">
    <el-container>
      <el-aside width="250px">
        <div class="logo">
          <iLogo :is-small="false" />
        </div>
        <div class="menu">
          <el-menu :default-active="path" :collapse="false" router :collapse-transition="false" background-color="#3584a7" text-color="#fff" active-text-color="#ffcd43">
            <el-submenu v-for="group in menu" :key="group.id" :index="group.id">
              <template slot="title">
                <i :class="group.icon"></i>
                <span slot="title">{{ group.name }}</span>
              </template>
              <el-menu-item v-for="submenu in group.children" :key="submenu.id" :index="submenu.path" @click="saveLocalPath(submenu.path)">
                <i :class="submenu.icon"></i>
                <span slot="title">{{ submenu.name }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <iHeader />
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import iLogo from '../../components/iLogo.vue'
import iHeader from '../../components/iHeader.vue'
import { getUID, getUserRole } from '../../utils/auth'
import setting from '../../setting'
import Cookie from 'js-cookie'
export default {
  name: 'Home',
  components: {
    iLogo,
    iHeader,
  },
  data() {
    return {
      projectList: [],
      path: '',
      menu: [
        {
          id: '10000',
          name: '项目管理',
          icon: 'iconfont icon-folder-open',
          children: [
            { id: '10001', name: '工程管理', path: '/Monitor_project', icon: 'iconfont icon-unorderedlist', lock: [0] },
            { id: '10002', name: '隧道断面管理', path: '/Tunnel_manage', icon: 'iconfont icon-unorderedlist', lock: [0] },
          ],
        },
        {
          id: '20000',
          name: '点位沉降记录',
          icon: 'iconfont icon-appstore',
          children: [{ id: '20001', name: '点位沉降记录', path: '/Monitor_point', icon: 'iconfont icon-unorderedlist', lock: [0] }],
        },
        {
          id: '30000',
          name: '人事管理',
          icon: 'iconfont icon-team',
          children: [
            { id: '30001', name: '员工列表', path: '/staff', icon: 'iconfont icon-switchuser', lock: [5, 6] },
            { id: '30002', name: '公司列表', path: '/company', icon: 'iconfont icon-switchuser', lock: [5, 6] },
          ],
        },
        // {
        //   id: '40000',
        //   name: '沉降记录',
        //   icon: 'iconfont icon-team',
        //   children: [{ id: '40001', name: '沉降记录', path: '/Monitor_log', icon: 'iconfont icon-switchuser', lock: [] }],
        // },
      ],
    }
  },
  methods: {
    saveLocalPath(path) {
      Cookie.set(setting.appMenuDefaultPathKey, path)
    },
    filterMenu() {
      this.menu.forEach(child => {
        child.children = child.children.filter(item => !item.lock.includes(this.$store.state.userInfo.role))
      })
      this.menu = this.menu.filter(menu => menu.children.length > 0)
    },
  },
  created() {
    this.path = Cookie.get(setting.appMenuDefaultPathKey)
  },
  mounted() {
    this.$store.commit('setUserRole', parseInt(getUserRole()))
    this.$store.commit('setUID', getUID())
    this.filterMenu()
  },
}
</script>

<style lang="scss" scoped>
#Home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background-color: #e4e4e1;

  .el-container {
    width: 100%;
    height: 100%;

    .el-aside {
      background: #3584a7;

      .logo {
        width: 100%;
        height: 60px;
      }

      .menu {
        width: 100%;
        height: calc(100% - 60px);
        overflow: hidden;

        .el-menu {
          i {
            color: #fff !important;
          }
        }
      }
    }

    .el-header {
      background: #fff;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
